<script setup lang="ts">
import { onMounted, ref, shallowRef } from 'vue'
import { useI18n } from 'vue-i18n'
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
import echarts, { ECOption } from '@/plugins/echarts'
import { getTrendStat } from '@/api/cms/flowstatistic'
const { t } = useI18n()
dayjs.extend(duration)

const dateRange = ref<string>('last30day')
const getBeginByDateRange = (range: string): string | undefined => {
  switch (range) {
    case 'now':
      return dayjs().subtract(2, 'hour').format()
    case 'today':
      return dayjs().startOf('day').format()
    case 'yesterday':
      return dayjs().startOf('day').subtract(1, 'day').format()
    case 'last7day':
      return dayjs().startOf('day').subtract(6, 'day').format()
    case 'last30day':
      return dayjs().startOf('day').subtract(29, 'day').format()
    case 'lastYear':
      return dayjs().startOf('day').subtract(1, 'year').format()
    default:
      return undefined
  }
}

const getEndByDateRange = (range: string): string => {
  if (range === 'now') {
    return dayjs().format()
  }
  if (range === 'yesterday') {
    return dayjs().endOf('day').subtract(1, 'day').format()
  }
  return dayjs().endOf('day').format()
}

const trendChart = shallowRef<HTMLElement>()
const initTrendChart = async (range: string) => {
  const list = await getTrendStat({
    begin: getBeginByDateRange(range),
    end: getEndByDateRange(range)
  })
  const option: ECOption = {
    tooltip: { trigger: 'axis' },
    legend: { data: [t('cms.access.pv'), t('cms.access.uv'), t('cms.access.ip')] },
    grid: { left: 16, right: 24, top: 40, bottom: 8, containLabel: true },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisTick: { show: false },
      data: list.map((item) => item.dateString)
    },
    yAxis: { type: 'value', minInterval: 1 },
    series: [
      {
        name: t('cms.access.pv'),
        type: 'line',
        symbol: list.length > 30 ? 'none' : 'circle',
        data: list.map((item) => item.pvCount)
      },
      {
        name: t('cms.access.uv'),
        type: 'line',
        symbol: list.length > 30 ? 'none' : 'circle',
        data: list.map((item) => item.uvCount)
      },
      {
        name: t('cms.access.ip'),
        type: 'line',
        symbol: list.length > 30 ? 'none' : 'circle',
        data: list.map((item) => item.ipCount)
      }
    ]
  }
  const chartDom = trendChart.value
  if (chartDom == null) {
    return
  }
  let chart = echarts.getInstanceByDom(chartDom)
  if (chart == null) {
    chart = echarts.init(chartDom)
  }
  chart.setOption(option)
  window.addEventListener('resize', function () {
    chart && chart.resize()
  })
}

onMounted(async () => {
  initTrendChart(dateRange.value)
})
</script>

<template>
  <div>
    <div class="p-3 mt-3 app-block">
      <div>
        <el-radio-group v-model="dateRange" @change="(value: any) => initTrendChart(value)">
          <el-radio-button
            v-for="item in ['today', 'yesterday', 'last7day', 'last30day', 'lastYear', 'all']"
            :key="item"
            :label="item"
          >
            {{ $t(`cms.access.${item}`) }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <div ref="trendChart" class="h-80"></div>
    </div>
  </div>
</template>
